昨天我們介紹了 JS 表達式如何在 Vue 綁定，今天一起來看一下「指令」怎麼實現這樣的功能吧！粗淺的帶大家一起走過幾個語法的小小應用～

定義

指令？

官方文件以這張圖，說明了「指令」的主要組成：「名稱」、「屬性」、「修飾符」和「值」。

• 名稱：如 v- 開頭這類的名稱。
• 屬性：指令的參數。
• 修飾符：用來修改指令的行為。
• 值：指令的值。

我們接著看下去！

記得之前有提過的 v-html、v-bind 嗎？這種以 v- 為開頭的特殊屬性就是「指令」。
而 Vue 提供了許多內建指令可以使用，讓我們可以用 JS 表達式與之綁定（官方文件：有少數幾個例外）。

v-if 範例

官方文件：<p v-if="seen">Now you see me</p>
v-if 指令的功能是：會基於綁定的「表達式的值」的「真/假」來決定是否插入元素。

也就是說：v-if 會去判斷 seen 這段 JS 表達式的「值」，是 true 就顯示，false 就不顯示。

我們可以試試看這樣寫：

<template>
  <p v-if="truthyValue">Here is a "truthy value" of v-if example.</p>
  <p v-if="falsyValue">Here is a "falsy value" of v-if example.</p>
</template>

<script setup>
const truthyValue = 123;
const falsyValue = "";
</script>

這邊做了什麼：

1. 定義了兩個用 v-if 指令綁定的 <p> 元素。
2. 一個以 truthyValue 變數綁定。truthyValue 的值為 123，123 是真值，所以這段 <p> 會顯示。
3. 一個以 falsyValue 變數綁定，falsyValue 的值為 ""，"" 是假值，所以這段 <p> 不會顯示。

瀏覽器上會看到：

參數 Arguments

某些指令會需要帶參數，例如 v-bind、v-on。

官方文件：某些指令會需要一個“參數”，在指令名後通過一個冒號隔開做標識。

例如用 v-bind 指令來響應式地更新一個 HTML 屬性：
<a v-bind:href="url"> ... </a>
簡寫：
<a :href="url"> ... </a>
這裡 href 就是一個參數，它告訴 v-bind 指令將表達式 url 的值綁定到元素的 href 屬性上。

範例

我們可以試試看這樣寫：

<template>
  <img :src="imagePath" />
</template>

<script setup>
const imagePath = "src/components/day10/images/Jerry_dating.jpg";
</script>

<style>
img {
  width: 300px;
}
</style>

這邊做了什麼：

1. 使用 v-bind 指令，把 src 屬性綁定成 imagePath 這個參數。
2. 使用指令簡寫（將 : 前的字去掉）。
3. 綁定的屬性將會與 imagePath 這個參數的定義保持同步。

瀏覽器上會看到：

那今天 imagePath 的值若改了！

<script setup>
const imagePath = "src/components/day10/images/Jerry_watching.jpg";
</script>

圖片就會換拉（好 Q）

動態參數

而我們也可以綁定「JS 表達式」作為指令的「動態參數」。

官方文件：同樣在指令參數上也可以使用一個 JavaScript 表達式，需要包含在一對方括號內
範例：<a v-bind:[attributeName]="url"> ... </a>

而動態參數有些限制需要注意：

• 需要為字串或 null（null 的話會將這屬性移除）
• 不能以空格、引號命名，例如：<a :['foo' + bar]="value"> ... </a>

範例

<button v-on:[eventName]="doSomething">Click Me!!!!</button>
</template>

<script setup>
const eventName = "click";
const doSomething = () => {
  console.log(`You are the BEST`);
};
</script>

我們做了什麼事：

1. 使用 v-on 指令綁定屬性 eventName，將其用 [] 括起來，它是一個會被以 JS 表達式解析的動態屬性。
2. eventName 定義為 "click"（字串）。
3. eventName 的值為 doSomething：會印出 You are the BEST。

我們來點點看按鈕！

小叮嚀！動態參數值需要為「字串」，沒有遵循的話會報錯：

修飾符 Modifiers

官方文件：修飾符是以點開頭的特殊後綴，表明指令需要以一些特殊的方式被綁定。例如 .prevent 修飾符會>告知 v-on 指令對觸發的事件調用 event.preventDefault()：

<form @submit.prevent="onSubmit">...</form>

官方文件在這稍微淺淺帶過了修飾符的功能，說之後會再講到（不是我鬼混喔

小結

正式宣布！Vue 模板語法的初步認識已經告一段落啦（西呀哇ㄙㄟ）

上目錄！方便搭家隨時穿越回去溫習：

• 欸你是要進 Vue 了沒？ - Day7：Vue 模板語法【Mustache、v-html】
• 欸你是要進 Vue 了沒？ - Day8：Vue 模板語法【屬性綁定】
• 欸你是要進 Vue 了沒？ - Day9：Vue 模板語法【JS 表達式】
• 欸你是要進 Vue 了沒？ - Day10：Vue 模板語法【指令 Directives】

明天一起來解鎖下個新的章節嚕！（是⋯⋯傳說中的 ref 喔⋯⋯）

範例 code ⬇️

https://github.com/Jamixcs/2024iThome-jamixcs/tree/main/src/components/day10

參考資料

• 官方文件